<template>
  <div>
    <el-card slot="header" class="box-card">
      <span style="font-size: 12px; color: pink"
        >说明：目前支持学科和关键字条件筛选</span
      >
      <el-button type="success" style="float: right" @click="getNew">
        <i class="el-icon-edit"></i>
        <span>新增试题</span>
      </el-button>
      <el-form
        :inline="true"
        class="demo-form-inline"
        style="margin-top: 30px"
        label-width="81px"
      >
        <el-form-item label="学科">
          <el-select
            placeholder="请选择"
            v-model="params.subjectID"
            @change="handler1"
          >
            <el-option
              v-for="item in subjectName"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select placeholder="请选择" v-model="params.catalogID">
            <el-option
              v-for="(item, index) in secondList"
              :key="index"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select placeholder="请选择" v-model="params.tags">
            <el-option
              v-for="(item, index) in tagList"
              :key="index"
              :label="item.tagName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            placeholder="根据题干搜索"
            style="width: 220px"
            v-model="params.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select placeholder="请选择" v-model="params.questionType">
            <el-option
              v-for="item in questiontype"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select placeholder="请选择" v-model="params.difficulty">
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select placeholder="请选择" v-model="params.direction">
            <el-option
              v-for="(item, index) in direction"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select placeholder="请选择" v-model="params.creatorID">
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input style="width: 222px" v-model="params.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input style="width: 222px" v-model="params.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            placeholder="请选择"
            style="width: 105px"
            v-model="params.province"
            @change="area"
          >
            <el-option
              v-for="(item, index) in provincess"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin-left: 10px; width: 105px"
            placeholder="请选择"
            v-model="params.city"
          >
            <el-option
              v-for="(item, index) in areas"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 159px">
          <el-button @click="claen">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 消息提示框 -->
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="试题编号" width="120" prop="number">
        </el-table-column>
        <el-table-column label="学科" width="105" prop="subject">
        </el-table-column>
        <el-table-column label="目录" width="103" prop="catalog">
        </el-table-column>
        <el-table-column label="题型" width="103" prop="questionType">
          <template #default="{ row }">{{ qtType(row.questionType) }}</template>
        </el-table-column>
        <el-table-column label="题干" width="280" prop="question">
          <template #default="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180" prop="addDate">
          <template #default="{ row }"> {{ timeRight(row.addDate) }} </template>
        </el-table-column>
        <el-table-column label="难度" width="103" prop="difficulty">
          <template #default="{ row }">{{ nandu(row.difficulty) }}</template>
        </el-table-column>
        <el-table-column label="录入人" width="103" prop="creator">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button
              plain
              type="primary"
              icon="el-icon-view"
              circle
              size="mini"
              @click="openDialog(row)"
            ></el-button>
            <el-button
              plain
              type="success"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="tonew(row.id)"
            ></el-button>
            <el-button
              plain
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="delDialog(row)"
            ></el-button>
            <el-button
              plain
              type="warning"
              icon="el-icon-check"
              circle
              size="mini"
              @click="tochoice(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- type="flex" justify="center" align="middle" -->
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        :total="this.counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="tableData.pages"
        :current-page="tableData.page"
      >
      </el-pagination>
    </el-card>
    <!-- 预览框 -->
    <questions-preview
      :dialog-visible="dialogVisible"
      @closegb="closeDialog2"
      :questionType="questionType"
      :formData="formData"
    >
    </questions-preview>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import { simple } from '@/api/hmmm/subjects.js'
import { list as sublist } from '@/api/hmmm/directorys.js'
import { list as taglist } from '@/api/hmmm/tags.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as userList } from '@/api/base/users.js'

export default {
  // props: {
  //   value: {
  //     type: String
  //   }
  // },
  components: {
    QuestionsPreview
  },
  data () {
    return {
      dialogVisible: false, // 弹框打开
      questionType: null, // 预览内容的题型
      formData: {}, // 预览数据
      tableData: [], // 表格渲染
      params: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        keyword: '',
        province: ''
      },
      counts: null,
      subjectName: [],
      // directorys: [], // 二极目录列表
      tagList: [], // 标签列表
      secondList: [], // 二级目录渲染
      // from: {}
      difficulty: difficulty,
      questiontype: questionType,
      direction: direction,
      provincess: [],
      // citys: citys,
      userList: [], // 录入人
      areas: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 渲染
    async getList () {
      const res = await list(this.params)
      const sbj = await simple()
      const users = await userList(this.params)
      this.tableData = res.data.items
      this.counts = res.data.counts
      this.subjectName = sbj.data
      this.userList = users.data.list
      this.provincess = provinces()
      console.log(this.tableData)
    },
    // 二级目录
    async handler1 () {
      const sbjlist = await sublist({ subjectID: this.params.subjectID })
      const tag = await taglist({ subjectID: this.params.subjectID })
      // console.log(sbjlist)
      if (this.params.subjectID) {
        this.secondList = sbjlist.data.items
        this.tagList = tag.data.items
      }
    },
    // 分页
    handleSizeChange (pagesize) {
      this.params.pagesize = pagesize
      this.params.page = 1
      this.getList()
    },
    handleCurrentChange (count) {
      this.params.page = count
      this.getList()
    },
    timeRight (value) {
      const res = dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      return res
    },
    qtType (value) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[value]
    },
    nandu (value) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[value]
    },
    async openDialog (row) {
      this.dialogVisible = true
      const res = await detail(row)
      this.formData = res.data
      console.log(res.data)
    },
    closeDialog2 () {
      this.dialogVisible = false
    },
    // 搜索
    async search () {
      const res = await list(this.params)
      this.tableData = res.data.items
    },
    // 删除
    delDialog (row) {
      this.$confirm('你确认要删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(id)
        await remove(row)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    // 修改试题
    tonew (id) {
      this.$router.push({ path: 'new', query: { id: id } })
    },
    tochoice (row) {
      this.$confirm('你确认要将此题目加入精选题库嘛么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        // console.log(id)
        row.choiceState = 1
        await choiceAdd(row)
        this.getList()
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.$router.push({ path: 'choice' })
      })
    },
    // 新增试题
    getNew () {
      this.$router.push({ path: 'new' })
    },
    // 清空
    claen () {
      this.params = {}
      this.getList()
    },
    // 城市
    area () {
      if (this.params.province + 1) {
        console.log(this.provincess)
        this.areas = citys(this.provincess[this.params.province])
      }
    }
  }
}
</script>

<style>
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.item {
  margin-top: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  padding: 20px;
}
</style>
